<script setup lang="ts">
import { reactive, shallowRef, markRaw } from "vue";

import A from "./A.vue";
import B from "./B.vue";
import C from "./C.vue";

const pages = reactive([
  { name: "选项一", com: markRaw(A) },
  { name: "选项二", com: markRaw(B) },
  { name: "选项三", com: markRaw(C) },
]);

const currentPage = shallowRef(A);
const activedIdx = shallowRef(0);

const switchTab = (com, idx) => {
  currentPage.value = com;
  activedIdx.value = idx;
};
</script>

<template>
  <ul class="flex justify-start items-center pl-4 border-b space-x-1 my-1">
    <li
      v-for="(item, idx) in pages"
      :class="{ 'bg-blue-100': idx === activedIdx }"
      class="border border-b-0 px-3 py-2 cursor-pointer"
      @click="switchTab(item.com, idx)"
    >
      {{ item.name }}
    </li>
  </ul>
  <component :is="currentPage" />
</template>

<style scoped></style>
